<template>
  <div v-show="visiable">
    <Dialog @close="close" :showclosebtn="false">
      <div slot="content">
        <div>
          <img
            class="text1"
            :src="require('@/assets/page2/text1.png')"
            alt=""
          />
          <div class="select">
            <span v-if="form.age">{{ form.age }}</span>
            <span v-else style="color: grey">年龄</span>
            <select v-model="form.age" class="hide-select" placeholder="年龄">
              <template v-for="i in 50">
                <option v-if="i >= 18" :value="i" :key="i">{{ i }}</option>
              </template>
            </select>
          </div>
        </div>
        <img class="text2" :src="require('@/assets/page2/text2.png')" alt="" />
        <div class="btn-wrapper">
          <div>
            <img
              class="btn1"
              @click="form.oldUser = true"
              :src="
                require(`@/assets/page2/btn_old${
                  form.oldUser === true ? '_checked' : ''
                }.png`)
              "
              alt=""
            />
          </div>
          <div>
            <img
              class="btn2"
              @click="form.oldUser = false"
              :src="
                require(`@/assets/page2/btn_new${
                  form.oldUser === false ? '_checked' : ''
                }.png`)
              "
              alt=""
            />
          </div>
        </div>
        <img class="text3" :src="require('@/assets/page2/text3.png')" alt="" />
        <img
          @click="gotoPage"
          class="submit-btn center"
          :src="require('@/assets/submit_btn.png')"
          alt=""
        />
      </div>
    </Dialog>
  </div>
</template>

<script>
import Dialog from './Dialog';
import service from '@/service';
export default {
  props: ['visiable'],
  name: 'ageandolduser',
  components: {
    Dialog,
  },
  data() {
    return {
      form: {
        age: '',
        oldUser: 'no',
      },
    };
  },
  create() {},
  methods: {
    close() {
      this.$emit('update:visiable', false);
    },
    gotoPage7() {
      this.$emit('gotoPage7');
    },
    gotoPage() {
      if (!this.form.age) {
        this.$toast('请选择年龄', {
          durtaion: 200,
        });
        return;
      }
      if (this.form.oldUser === 'no') {
        this.$toast('请选择是否使用过za产品', {
          durtaion: 200,
        });
        return;
      }

      service.bindUser(this.form).then((res) => {
        if (this.form.age > 30) {
          this.gotoPage7();
        } else {
          service.getStock().then((res) => {
            // 查库存
            if (
              (res.stock1 >= 1 && this.form.oldUser) ||
              (res.stock2 >= 1 && !this.form.oldUser)
            ) {
              // 老用户 || 新用户
              this.$router.push('/Page3');
            } else {
              this.gotoPage7();
            }
          });
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
@import '../styles/function.scss';
.select {
  border: 1px solid #fa8d9e;
  border-radius: 7px;
  background: #fff;
  padding-left: 10px;
  position: relative;
  height: switchwidth(110);
  line-height: switchwidth(110);
  font-size: switchwidth(36);
  color: #000000;
}
.hide-select {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.btn1 {
  width: switchwidth(300);
}
.btn2 {
  width: switchwidth(300);
}
.btn-wrapper {
  display: flex;
  justify-content: space-between;
}
.text1 {
  width: switchwidth(409);
  margin-top: switchwidth(137);
  display: block;
  margin-bottom: switchwidth(52);
}
.text2 {
  width: switchwidth(613);
  margin-top: switchwidth(178);
  margin-bottom: switchwidth(50);
  display: block;
}
.text3 {
  width: switchwidth(285);
  margin-top: switchwidth(43);
  margin-bottom: switchwidth(180);
  display: block;
}
</style>
